<template>
  <div class="audit_link">
    <vxe-table
      class="mytable-scrollbar"
      border
      stripe
      min-height="100%"
      row-id="bulletionId"
      size="medium"
      resizable
      :loading="loading2"
      :scroll-y="{ enabled: false }"
      :data="tableData"
      :header-cell-class-name="headerStyle"
      :row-class-name="rowClass"
      :checkbox-config="{ highlight: true, range: false }"
      highlight-hover-row
      @radio-change="radioChangeEvent">
      <vxe-table-column type="radio" width="40"></vxe-table-column>
      <!-- <vxe-table-column type="seq" title="序号" width="50" align="center"></vxe-table-column> -->
      <vxe-table-column field="formType" title="单据类型" width="200" align="center"></vxe-table-column>
      <vxe-table-column field="reimburseTime" title="出差时间" min-width="250" align="center"></vxe-table-column>
      <vxe-table-column field="reimburseReason" title="出差事由" min-width="265" align="center"></vxe-table-column>
    </vxe-table>
    <pagination
      slot="pagination"
      :page-size.sync="tablePage.pageSize"
      :total="tablePage.totalSize"
      :current-page.sync="tablePage.pageNum"
      :pageSizes="[10, 20]"
      layout="slot,prev, pager, next, sizes, jumper"
      @change="onPageChange"></pagination>
    <div class="btn_save">
      <el-button @click="cancelLink" size="small">取 消</el-button>
      <el-button size="small" type="primary" @click="linkSuccess">提 交</el-button>
    </div>
  </div>
</template>

<script>
import { getlistPassTripReimburse } from '@apis/api-dailyManage.js'
import pagination from '@com/pagination'
export default {
  components: { pagination },
  data() {
    return {
      loading2: false,
      tableData: [],
      tablePage: {
        pageNum: 1,
        pageSize: 10,
        totalSize: 0,
      },
      selectRow: {},
    }
  },
  created() {
    this.getPage()
  },
  mounted() {},
  methods: {
    getPage() {
      getlistPassTripReimburse({
        current: this.tablePage.pageNum,
        pageSize: this.tablePage.pageSize,
        tenantId: localStorage.pskh_tenantId,
        userId: localStorage.pskh_userId,
      }).then(res => {
        this.tableData = res.data.records || []
        this.tablePage.totalSize = res.data.total
      })
    },
    /* 分页切换 */
    onPageChange(e) {
      this.selectParams.pageNum = e.pageNumber
      this.selectParams.pageSize = e.pageSize
      this.getPage()
    },
    /* 状态筛选 */
    onStatusChange(e) {
      this.selectParams.status = e
      this.getPage()
    },
    /* 头部样式 */
    headerStyle({ row, column, rowIndex, columnIndex }) {
      return 'headerStyle'
    },
    rowClass({ row, rowIndex }) {
      return 'rowClass'
    },
    /* 监听CheckBox变化 */
    radioChangeEvent({ row }) {
      this.selectRow = row
    },
    cancelLink() {
      this.$emit('cancelLink', true)
    },
    linkSuccess() {
      if (Object.keys(this.selectRow).length === 0) {
        this.$message.error('请选择关联的数据')
        return
      }
      this.$emit('linkSuccess', this.selectRow)
    },
  },
}
</script>

<style lang="scss" scoped>
.audit_link {
  .btn_save {
    text-align: center;
    margin-top: 15px;
  }
}
</style>
